<template>
  <div id="app">
    <h1 align="center">举报原因</h1><br>
    <el-input
      type="textarea"
      :rows="8"
      placeholder="请输入内容"
      v-model="content"
      class="complaint">
    </el-input><br>
    <el-button type="primary" @click="Report">
      确认举报
    </el-button>
  </div>
</template>

<script>
import axios from 'axios'
// import router from '../../router'
// import Bus from 'bus.js'
export default {
  name: 'ReportTask',
  data () {
    return {
      id: this.$route.params.id,
      content: ''
    }
  },
  mounted () {
    // 监听浏览器的返回按钮
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.onCloseModal, false)
    }
  },
  methods: {
    // 监听返回按钮的处理函数
    // onCloseModal () {
    //   // Bus.$emit('id', this.id)
    //   // this.$router.go(-1)
    //   return this.$router.push({
    //     path: '/ReadTask',
    //     name: 'ReadTask',
    //     params: {
    //       id: this.id.toString()
    //     }
    //   })
    // },
    onCloseModal () {
      return this.$router.replace({
        path: '/ReadTask',
        name: 'ReadTask',
        params: {
          id: this.id.toString()
        }
      })
      // replace替换原路由，作用是避免回退死循环
    },
    Report: function () {
      if (this.content === '') {
        alert('请输入举报内容')
      } else {
        axios.post(`user/task/reportPreTask`, {
          task_id: this.id,
          content: this.content
        }).then(res => {
          if (res.data.data.flag === 200) {
            alert('收到您的举报')
            return this.$router.push({
              path: '/TaskList'
            })
          } else {
            alert(res.data.data.msg)
            return this.$router.push({
              path: '/TaskList'
            })
          }
        }).catch(err => {
          alert(err)
          // router.replace('/login')
        })
      }
    }
  },
  // 组件销毁阶段，解除监听返回按钮的事件
  destroyed () {
    window.removeEventListener('popstate', this.onCloseModal, false)
  }
}
</script>

<style scoped>
.complaint{
  text-align: center;
  height: 350px;
  margin: 30px auto;
  width: 600px;
}
</style>
